<template>
    <div class="About">
        <!--       lesson Info-->
        <div class="lessonInfo animated fadeIn" style="animationDelay:0s">
            <h4>{{data.intro_lession.lession_name}}</h4>
            <div class="sec">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang"></use></svg>&#8197;{{data.intro_lession.lession_view}}&emsp;
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shijian"></use></svg>&#8197;{{data.intro_lession.lession_num_hour}}课时&emsp;
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-star"></use></svg>&#8197;{{data.intro_lession.lession_level}}
            </div>
            <div class="thr" v-if="data.intro_lession.lession_time">
                开课时间：{{data.intro_lession.lession_time}}  {{data.intro_lession.lession_update_time}}&emsp;&emsp;<span style="color:#eb5b29;">{{data.intro_lession.buynum}}</span>人参与学习
            </div>
        </div>
        <!--        teacher info-->
        <div class="teacherInfo animated fadeIn" style="animationDelay:0.1s">
            <img :src="data.intro_teacher.teacher_img" alt="" class="teacherImg" @click="$router.push({path:'/florist',query:{teacher_id:data.intro_teacher.teacher_id}})">
            <div class="teacherDetail" @click="$router.push({path:'/florist',query:{teacher_id:data.intro_teacher.teacher_id}})">
                <h3>{{data.intro_teacher.teacher_name}}&emsp;<i class="el-icon-arrow-right in" ></i></h3>
                <p class="level">{{data.intro_teacher.teacher_level}}</p>
                <p class="instro">
                    {{data.intro_teacher.teacher_desc}}
                </p>
            </div>
            <!--添加关注-->
            <p class="gz" :class="{on:followState===2}" @click="follow" v-loading="loadingGZ" element-loading-spinner="el-icon-loading">{{followState===1?'+关注':'已关注'}}</p>
        </div>
        <!--        课程介绍-->
        <div class="lessonDetail animated fadeIn" style="animationDelay:0.2s">
            <h4>课程介绍</h4>
            <div class="content" v-html="data.intro_lession.lession_desc">
                
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'About',
        data () {
            return {
                loadingGZ:false,//关注请求动画
                followState:-1//1:未关注 2：已关注
            }
        },
        props:['data'],
        watch:{//监听关注状态
            'data.intro_teacher.is_follow':function(val,oldval){
                this.followState = val;
            }
        },
        created(){
            //初始化赋值关注状态
            this.followState = this.data.intro_teacher.is_follow;
        },
        methods:{
            //添加关注
            follow(){
                if(this.getMemberId() === 0){
                    this.$router.push('/login')
                    return;
                }
                this.loadingGZ = true;
                this.Posthttp('/?method=flower.user.addFollow',{teacher_id:this.data.intro_teacher.teacher_id,member_id:this.getMemberId(),follow_type:this.followState},(res)=>{
                    this.loadingGZ = false;
                    if(JSON.parse(res.bodyText).status === 1){//成功
                        this.followState = this.followState === 1?2:1;
                    }else{//失败
                        this.$message.warning(JSON.parse(res.bodyText).msg);
                    }
                });
            },
            //
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .About {
        background-color: #f2f2f2;
        /*lessonInfo*/
        .lessonInfo{
            background-color: #fff;
            padding: .3rem .2rem;
            line-height: .36rem;
            h4{
                font-size: .28rem;
                color: #333;
            }
            .sec{
                font-size: .2rem;
                margin-top: .2rem;
                .icon{
                    font-size: .28rem;
                    vertical-align: -.05rem;
                }
            }
            .thr{
                font-size: .2rem;
                margin-top: .2rem;
            }
        }
        /*teacherInfo*/
        .teacherInfo{
            background-color: #fff;
            margin-top: .2rem;
            padding: .4rem .2rem;
            position: relative;
            .teacherImg{
                width: 1.2rem;
                height: 1.2rem;
                border-radius: 100%;
                float: left;
            }
            .teacherDetail{
                margin-left: 1.2rem;
                padding-left: .2rem;
                color: #777;
                h3{
                    font-size: .3rem;
                    color: #333;
                }
                .in{
                    font-size: .4rem;
                    color: #333;
                }
                .level{
                    margin-top: .2rem;
                }
                .instro{
                    line-height: .38rem;
                    margin-top: .3rem;
                    text-align: justify;
                }
            }
            .gz{
                position: absolute;
                width: 1.3rem;
                height: .6rem;
                line-height: .6rem;
                text-align: center;
                border: 1px solid #777777;
                border-radius: .06rem;
                top: .5rem;
                right: .36rem;
                z-index: 10;
                &.on{
                    border: 1px solid #e7470e;
                    color: #e7470e;
                }
            }
        }
        /*课程介绍*/
        .lessonDetail{
            padding: .4rem .2rem;
            background: #fff;
            margin-top: .2rem;
            line-height: .4rem;
            overflow: hidden;
            h4{
                font-size: .28rem;
                color: #333;
                margin-bottom: .2rem;
            }
            .content{
                text-indent: 2em;
                img{
                    width: 100%;
                    height: auto;
                    display: block;
                    font-size: 0;
                }
            }
        }
    }
</style>
